import React from 'react';
import { RouteObject } from 'react-router-dom';
import Layout from './layout';

const Loading = () => null;

const Home = React.lazy(() => import('./home'));
const Avifenc = React.lazy(() => import('./avifenc'));
const Avifdec = React.lazy(() => import('./avifdec'));
const Page404 = React.lazy(() => import('./404'));

const routes: RouteObject[] = [
  {
    path: '/',
    element: (
      <React.Suspense fallback={<Loading />}>
        <Layout />
      </React.Suspense>
    ),
    children: [
      {
        index: true,
        element: (
          <React.Suspense fallback={<Loading />}>
            <Home />
          </React.Suspense>
        ),
      },
      {
        path: '/avifenc',
        element: (
          <React.Suspense fallback={<Loading />}>
            <Avifenc />
          </React.Suspense>
        ),
      },
      {
        path: '/avifdec',
        element: (
          <React.Suspense fallback={<Loading />}>
            <Avifdec />
          </React.Suspense>
        ),
      },
    ],
  },
  {
    path: '/*',
    element: (
      <React.Suspense fallback={<Loading />}>
        <Page404 />
      </React.Suspense>
    ),
    children: [],
  },
];

export default routes;
